import React, { Component } from 'react'

class AppContent extends Component{
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>It is the date {this.props.date}</h1>
      </div>
    );
  }
}


 class Toggle extends Component {
  constructor(props){
    super(props)
    this.state = {
      name : "Dorin Huang"
    }
  }
  // bindClicked = ()=>{
  //   console.log(this.state.name);    //因为匿名函数在定义的时候this已经绑定了,所以 this 没有bind方法，
                                        //普通函数在调用的时候this才被绑定，JSX中的的事件，会脱离当前上下文，在调用的时候this会丢失，所以需要绑定完之后才能用。
  // }
  bindClicked(){
    console.log(this.state.name);
  }
  render() {
    return (
      <div>
        <button onClick={this.bindClicked.bind(this)}>
          点我
        </button>
      </div>
    )
  }
}


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount = () => {     //妈的，属性外写只是一个ES6的提案，尼玛你babel已经用上了，
                                  //老子搞了一下午,把node升级到最新版本的，发现都不支持。尼玛
                                  // 心累~~，妹子找我聊天都没理她
    console.log(`${this.state.date.toLocaleTimeString()}`);
    this._updateTime();
  };

  _updateTime(){
    setInterval(()=>{
      this.setState({
        date: new Date()
      })
    },1000);
  }

  componentWillUnmount = () => {
    console.log('xxxxxx');
  }
  
  render() {
    return (
      <div>
        <h1>Hello {this.state.date.toLocaleTimeString()}</h1>
        <AppContent date={this.state.date.toLocaleTimeString() + '哈哈哈'}></AppContent>
        <Toggle></Toggle>
      </div>
    )
  }
}





